<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>layout</title>
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
	<script type="text/javascript" src="../js/ext-base.js"></script>
	<script type="text/javascript" src="../js/ext-all-debug.js"></script>
	<script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>
        <script type="text/javascript">
Ext.onReady(function(){

    var navHandler = function(direction){

        var wizard = Ext.getCmp('wizard').layout;
        var prev = Ext.getCmp('move-prev');
        var next = Ext.getCmp('move-next');
        var activeId = wizard.activeItem.id;

        if (activeId == 'card-0') {
            if (direction == 1) {
                wizard.setActiveItem(1);
                prev.setDisabled(false);
            }
        } else if (activeId == 'card-1') {
            if (direction == -1) {
                wizard.setActiveItem(0);
                prev.setDisabled(true);
            } else {
                wizard.setActiveItem(2);
                next.setDisabled(true);
            }
        } else if (activeId == 'card-2') {
            if (direction == -1) {
                wizard.setActiveItem(1);
                next.setDisabled(false);
            }
        }
    };

    var viewport = new Ext.Viewport({
        layout:'border',
        items:[{
        	region: 'center',
        	layout:'form',
        	items:[{
	            id: 'wizard',
	            title: '注册向导',
	            height:Ext.get('card').getHeight(),
	            layout:'card',
	            activeItem: 0,
	            bodyStyle: 'padding:15px;',
	            defaults: {
	                border:false
	            },
	            bbar: [{
	                id: 'move-prev',
	                text: '上一步',
	                handler: navHandler.createDelegate(this, [-1]),
	                disabled: true
	            }, '->',{
	                id: 'move-next',
	                text: '下一步',
	                handler: navHandler.createDelegate(this, [1])
	            }],
	            items: [new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:'save-form.php',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',

        items: [{
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank:false
            },{
                fieldLabel: 'Last Name',
                name: 'last'
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }, new Ext.form.TimeField({
                fieldLabel: 'Time',
                name: 'time',
                minValue: '8:00am',
                maxValue: '6:00pm'
            })
        ],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    }),{
				//一个标签页里的FormPanel
				id:'card-1',
				layout:'form',
				defaults:{width:230},
				defaultType:'textfield',
				
				items:[{
					fieldLabel:'Home',
					name:'home',
					value:'(888) 555-1212'
				},{
					fieldLabel:'Business',
					name:'business'
				},{
					fieldLabel:'Mobile',
					name:'mobile'
				},{
					fieldLabel:'Fax',
					name:'fax'
				}]
			},{
	                id: 'card-2',
	                html: '<h1>恭喜恭喜，完成了。</h1><p>第三步，一共三步，最后一步了。</p>'
	            }]
	        }]       	
        }]
        
        
    });

});
        </script>
    </head>
    <body>
    	<div id="card" style="height:100%"></div>
    </body>
</html>
